<template>
  <v-sheet color="transparent" class="d-flex justify-center my-4 flex-wrap">
    <!-- PayPal -->
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-img
          v-bind="attrs"
          v-on="on"
          src="~/public/images/pay-icon/icon-paypal.svg"
          class="mx-2"
          :style="{ width: iconSize, height: iconSize }"
          contain
        />
      </template>
      <span>PayPal</span>
    </v-tooltip>

    <!-- Visa -->
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-img
          v-bind="attrs"
          v-on="on"
          src="~/public/images/pay-icon/icon-visa.svg"
          class="mx-2"
          :style="{ width: iconSize, height: iconSize }"
          contain
        />
      </template>
      <span>Visa</span>
    </v-tooltip>

    <!-- T/T -->
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-img
          v-bind="attrs"
          v-on="on"
          src="~/public/images/pay-icon/icon-tt2.svg"
          class="mx-2"
          :style="{ width: iconSize, height: iconSize }"
          contain
        />
      </template>
      <span>Telegraphic Transfer</span>
    </v-tooltip>

    <!-- Bank Transfer -->
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-img
          v-bind="attrs"
          v-on="on"
          src="~/public/images/pay-icon/icon-bank-transfer.svg"
          class="mx-2"
          :style="{ width: iconSize, height: iconSize }"
          contain
        />
      </template>
      <span>Bank Transfer</span>
    </v-tooltip>
  </v-sheet>
</template>

<script>
export default {
  name: "PaymentIcons",
  data() {
    return {
      iconSize: "40px",
    };
  },
  mounted() {
    // 响应式处理
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      if (window.innerWidth < 600) {
        this.iconSize = "32px";
      } else if (window.innerWidth < 960) {
        this.iconSize = "36px";
      } else {
        this.iconSize = "40px";
      }
    },
  },
};
</script>

<style scoped>
/* 可选：添加过渡效果 */
.v-img {
  transition: transform 0.2s ease-in-out;
}
.v-img:hover {
  transform: scale(1.1);
}
</style>